<template>
  <view class="drawalShop">
    <view class="codeInfo">
      <view>{{ textTitle }}</view>
      <view>{{ textTitleH }}</view>
      <view style="margin-top: 32rpx;margin-bottom: 32rpx">订单号：{{ drawInfo.order_id }}</view>
      <QRCodeImg v-if="!iscashOnDelivery" ref="qrCodeImg" :img-width="QRWidth" :qr-code-info="drawInfo.order_id" />
      <view v-if="drawInfo.verify_code && !iscashOnDelivery" style="margin-top: 16rpx;" class="drawNum">{{ drawInfo.verify_code }}</view>
      <view v-if="drawInfo.verify_code && !iscashOnDelivery">取货码</view>
    </view>
    <view>
      <view v-for="(item, index) in drawInfoList" :key="index" class="beween">
        {{ item.name }}
        <text>{{ drawInfo[item.key] }}</text>
      </view>
    </view>

  </view>
</template>

<script>
import QRCodeImg from '@/components/QR-code'
import { getDrawInfo } from '@/api/orderApi';

export default {
  components: {
    QRCodeImg
  },
  data() {
    return {
      QRWidth: '360',
      drawInfoList: [
        { name: '自提点', key: 'self_take_shop' },
        { name: '自提时间', key: 'self_take_in' },
        { name: '自提库房', key: 'self_take_warehouse' },
      ],
      drawInfo: {},
      orderId: '', //父页面的订单号
      textTitle: '',
      textTitleH: '',
      paidType: '',
      iscashOnDelivery: false,
      cashOnDelivery: [1101, 1102, 1103] // 货到付款
    }
  },
  onLoad(option) {
    console.log('提货码页面')
    this.paidType = Number(option.paidType)
    this.orderId = option.id
    this.getDrawInfo(option.id)
  },
  methods: {
    initFn() {
      //货到付款的订单 如果没有提货码就提示文案
      if (this.cashOnDelivery.includes(this.paidType)) {
        if (this.drawInfo.verify_code && this.drawInfo.verify_code != '') { //货到付款-已付款展示提货码
          this.showDrawFn()
        } else { // 货到付款-未付款
          this.iscashOnDelivery = true
          this.textTitle = '您选择了货到付款'
          this.textTitleH = '请在预约时间内到所选门店付款后再取货'
        }
      } else {
        this.showDrawFn()
      }
    },
    showDrawFn() {
      this.textTitle = '您可凭【取货码】'
      this.textTitleH = '在预约时间内到所选门店库房取货'
    },
    async getDrawInfo(order_id) {
      const { memberId } = this.vuex_memberInfo
      const params = {
        order_id,
        member_id: memberId
      }
      const res = await getDrawInfo(params)
      if (res.errorCode == 0) {
        const { order_id, verify_code, self_take_warehouse, self_take_in, self_take_shop } = res.data
        this.drawInfo = {
          order_id,
          verify_code,
          self_take_warehouse,
          self_take_in,
          self_take_shop
        }
        this.initFn()
      }
    }
  }
}
</script>
<style>
 page {
   background: #F5F5F5;
 }
</style>
<style scoped lang="scss">
 .drawalShop {
   padding: 24rpx 32rpx;
   box-sizing: border-box;
   .codeInfo {
     background: #FFFFFF;
     padding: 48rpx 0rpx 32rpx 0rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
     align-items: center;
     color: #222222;
     font-size: 28rpx;
     font-weight: 400;
     margin-bottom: 16rpx;
   }
   .drawNum {
     color: #FF5533;
     font-size: 48rpx;
     font-weight: 700;
   }
   .beween {
     display: flex;
     justify-content: space-between;
     align-items: center;
     align-content: center;
     padding: 28rpx 32rpx;
     box-sizing: border-box;
     background: #FFFFFF;
     color: #222222;
     font-size: 28rpx;
     font-weight: 500;
     border-bottom: 1rpx solid #F5F5F5;
     text {
       display: block;
       max-width: 72%;
       font-weight: 400;
     }
   }
 }
</style>
